<template>
  <div>
    <van-form ref="form" colon @submit="onSubmit">
      <van-nav-bar title="新建订单" left-text="取消" right-text="确认" @click-left="onCancel"
                   @click-right="$refs.form.submit()"/>
      <van-cell-group>
        <van-field name="boards" label="板块">
          <template #input>
            <van-checkbox-group v-model="inputForm.boards">
              <van-checkbox v-for="(item, index) in boardList" :key="index" :name="item.board" shape="square">
                {{ item.board }}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field name="months" label="月数">
          <template #input>
            <van-stepper v-model="inputForm.months" theme="round" button-size="22" min="1"/>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import {Notify} from 'vant';

export default {
  props: {
    url: String
  },
  data() {
    return {
      boardList: [],
      inputForm: {
        boards: [],
        months: 1
      },
    }
  },
  methods: {
    load() {
      this.$requests.post(this.url).then(resp => {
        this.boardList = resp
      })
    },
    onCancel() {
      this.$emit('cancel')
    },
    onSubmit(form) {
      if (form.boards.length) {
        this.$emit('submit', form)
      } else {
        Notify({type: 'danger', message: '请选择板块'});
      }
    }
  },
  mounted() {
    this.load()
  }
}
</script>
